<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 3015/8/10 0010
  Time: 10:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page  import="java.util.*" language="java"  pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-CN">
  <%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<html>
<base href="<%=basePath%>">
<head>
  <title>欢迎注册</title>
  <link href="/css/bootstrap.min.css" rel="stylesheet">
  <script src="/jquery/jquery.min.js"></script>
  <script src="/js/bootstrap.min.js"></script>
  <style type="text/css">
    .wrapper{
      width: 750px;
      margin: 0 auto 30px;
      overflow: hidden;
      zoom: 1;
    }
    .warn{
      border: none;
      color: tomato;
      background-color: #eee;
      width: 1000px;
    }
  </style>
</head>

<body>
<div class="jumbotron">
  <div class="container">
      <div class="wrapper">
        <h3>欢迎加入一天:</h3>
      </div>
      <form class="form-horizontal" id="register" method="post" role="form" action="user/register.htm">
        <div class="form-group">
          <label for="name" class="col-sm-3 control-label">昵称</label>
          <div class="col-sm-3">
            <input type="text" class="form-control" maxlength="20" id="name" name="name"
                   placeholder="请输入昵称">
          </div>
        </div>
        <div class="form-group">
          <label for="email" class="col-sm-3 control-label">邮箱</label>
          <div class="col-sm-3">
            <input type="text" class="form-control" id="email" name="email"
                   placeholder="请输入邮箱地址">
          </div>
        </div>
        <div class="form-group">
          <label for="password" class="col-sm-3 control-label">设置密码</label>
          <div class="col-sm-3">
            <input type="password" class="form-control" id="password" maxlength="20" name="password"
                   placeholder="请输入密码">
          </div>
        </div>
        <div class="form-group">
          <label for="password2" class="col-sm-3 control-label">验证密码</label>
          <div class="col-sm-3">
            <input type="password" class="form-control" id="password2" maxlength="20" name="password2"
                   placeholder="请再次输入密码">
          </div>
        </div>
        <div class="form-group">
          <label for="city" class="col-sm-3 control-label">城市</label>
          <div class="col-sm-3">
            <input type="text" class="form-control" id="city" name="city"
                   placeholder="常居地">
          </div>
        </div>
        <div class="form-group">
          <label for="telephone" class="col-sm-3 control-label">手机号</label>
          <div class="col-sm-3">
            <input type="text" class="form-control" id="telephone" name="telephone"
                   placeholder="手机号">
          </div>
        </div>
        <div class="form-group">
          <label for="validateCode" class="col-sm-3 control-label">验证码</label>
          <div class="col-lg-3">
            <div class="input-group">
              <input type="text" class="form-control" id="validateCode" name="validateCode" placeholder="验证码">
                   <span class="input-group-btn">
                      <button class="btn btn-default" type="button">
                        获得验证码
                      </button>
                   </span>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-3 col-sm-10">
            <div class="checkbox">
              <label>
                <input name="isPermit" id="isPermit" type="checkbox"> 我已经认真阅读并同意一天的《<a href="/page/user/protocol.jsp" target="_blank">使用协议</a>》。
              </label>
            </div>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-3 col-sm-12">
            <button type="button" class="btn btn-default" onclick="register()">提交注册</button>
            <%--<span style="color: tomato; margin-left: 2em">${code}</span>--%>
            <c:if test="${code != null}">
              <input id="warn" class="warn" disabled="true"  value="${code}">
            </c:if>
            <c:if test="${code == null}">
              <input id="warn" class="warn" disabled="true" value="${code}">
            </c:if>
          </div>
        </div>
      </form>
  </div>
</div>
</body>
<script>
  function register() {
    //验证昵称
    var name = $("#name").val();
    if (name == null) {
      $("#warn").val("昵称不能为空！");
      $("#warn").show();
      return;
    }
    if (name.length > 5) {
      $("#warn").val("昵称不能超过五个字！");
      $("#warn").show();
      return;
    }
    //验证邮箱
    var reg = /^[A-Za-z0-9._]+@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/; //邮箱的正则
    var email = $("#email").val();
    if (!reg.test(email)) {
      $("#warn").val("邮箱地址不符合规范！");
      $("#warn").show();
      return;
    }
    //验证密码
    var pa = /^[0-9a-zA-Z_]+$/;
    var password = $("#password").val();
    var password2 = $("#password2").val();
    if (password == null) {
      $("#warn").val("密码不能为空！");
      $("#warn").show();
      return;
    } else if (!pa.test(password)) {
      $("#warn").val("密码只能是字母、数字或下划线");
      $("#warn").show();
      return;
    } else if (password.length > 20) {
      $("#warn").val("密码不能超过20个字符！");
      $("#warn").show();
      return;
    } else if (password != password2) {
      $("#warn").val("两次输入的密码不一致！");
      $("#warn").show();
      return;
    }
    //校验城市暂不校验
    //校验手机号
    var tel = /^(1[0-9]{10})$/
    var telephone = $("#telephone").val();
    if (!tel.test(telephone)) {
      $("#warn").val("手机号不符合规范！");
      $("#warn").show();
      return;
    }
    //同意使用协议
    if (!$("#isPermit").is(":checked")) {
      $("#warn").val("必须要同意协议！");
      $("#warn").show();
      return;
    }else {
      $("#isPermit").val(1);
    }
    $("#warn").hide();
    $("#register").submit();
  }
</script>
</html>
